<template>
	<view>
		<view v-if="shopInfo.projectId!=9999" class="functionItem" @click="gotoSystemPermission">
			<view class="left" >
				<image class="icon" src="@/static/image/icon_systemPermission.png" mode=""></image>
				系统权限
			</view>
			<view class="right">
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>

		<view v-if="shopInfo.projectId!=9999" class="functionItem" @click="gotoAuthManage">
			<view class="left">
				<image class="icon" src="@/static/image/icon_authManage.png" mode=""></image>
				授权管理
			</view>
			<view class="right" >
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>	
		
		<view v-if="shopInfo.projectId==9999" class="functionItem" @click="onDeleteAccount">
			<view class="left">
				<image class="icon" src="@/static/image/icon_authManage.png" mode=""></image>
				注销账号
			</view>
			<view class="right" >
				<image class="image" src="@/static/image/icon_more.png" mode=""></image>
			</view>
		</view>	
		
		<view class="bottomBtnContainer">
			<view class="bottomBtnWrapper" @click="onLoginOut">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
    const api = require("@/static/js/api.js")
    const utils = require("@/static/js/utils.js")
    import {
        mapState,
        mapMutations,
        mapActions
    } from 'vuex';
    let that = null

    
	export default {
		data() {
			return {

			};
		},
        
        computed: {
            ...mapState({
                hasLogin: state => state.userInfo.hasLogin,
                isAuthPhone: state => state.userInfo.isAuthPhone,
                isAuthUserInfo: state => state.userInfo.isAuthUserInfo, 
                isSeller: state => state.userInfo.isSeller,
                sellerObj: state => state.userInfo.sellerObj,
                buyerObj: state => state.userInfo.buyerObj,
                shopInfo: state => state.userInfo.shopInfo,
            }),
        },
        
        onLoad(options) {
            that = this;
            
        },
        onShow() {
      
        },
		computed: {
			...mapState({
				hasLogin: (state) => state.userInfo.hasLogin,
				isAuthPhone: (state) => state.userInfo.isAuthPhone,
				isAuthUserInfo: (state) => state.userInfo.isAuthUserInfo,
				isSeller: (state) => state.userInfo.isSeller,
				sellerObj: (state) => state.userInfo.sellerObj,
				buyerObj: (state) => state.userInfo.buyerObj,
				shopInfo: (state) => state.userInfo.shopInfo,
				authTiktokInfo: state => state.userInfo.authTiktokInfo,
				authTiktokPermission: state => state.userInfo.authTiktokPermission,
			}),
		},
        methods:{ 
            ...mapMutations(['setUserInfo','clearUserInfo', 'setLoginStatus', 'setUserId',"setOrigin"]),
            gotoSystemPermission(){
				console.log("gotoSystemPermission")
				uni.navigateTo({
					url: "/pages/shop/setting/systemPermission"
				})
			},
			gotoAuthManage(){
				uni.navigateTo({
					url: "/pages/shop/tiktok/authTiktokManage"
				})
			},
			onLoginOut(){
				uni.setStorageSync('Authorization', "")
				this.clearUserInfo()
				uni.reLaunch({
					url: "/pages/home/home"
				})
			},
			deleteAccount(){
				let that = this
				uni.showModal({
					title: "账号注销",
					content: "提交申请，删除所有数据，永久注销",
					cancelText: "取消",	
					confirmText: "注销账号",
					success (res) {
					    if (res.confirm) {							
							api.deleteAccount().then(res=>{
								uni.setStorageSync("projectId","")
								that.onLoginOut()
							})
							// console.log('用户点击确定')
					    } else if (res.cancel) {
							// console.log('用户点击取消')
					    }
					}
				})
			},
			onDeleteAccount(){
				let that = this
				uni.showModal({
					title: "提示",
					content: "你确定永久注销账号吗？",
					cancelText: "取消",	
					confirmText: "注销账号",
					success (res) {
					    if (res.confirm) {
							that.deleteAccount()
							// console.log('用户点击确定')
					    } else if (res.cancel) {
							// console.log('用户点击取消')
					    }
					}
				})
			}
			
        }
	}
</script>
<style>
	page{
		background-color: #f3f3f3;
	}
</style>

<style lang="scss">
	.functionItem {
		width: 750rpx;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 1px;

		.left {
			font-size: 30rpx;
			color: #333333;
			margin-left: 40rpx;
			display: flex;
			align-items: center;

			.icon {
				width: 40rpx;
				height: 40rpx;
				// margin-left: 30rpx;
				margin-right: 30rpx;
			}
		}

		.right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #999999;
			margin-right: 40rpx;

			.image {
				width: 16rpx;
				height: 22rpx;
				margin-left: 33rpx;
			}
		}
	}

</style>
